<template>
  <div>
    <el-container>
      <el-aside width="200px" >
        <div class="logo-container">
          <img src="@/assets/后台.jpg" alt="Logo" class="logo">
        </div>
        <el-menu :default-active="activeMenu" class="el-menu-vertical-demo">
          <el-menu-item index="/orders" @click="navigateTo('/orders')">订单管理</el-menu-item>
          <el-menu-item index="/products" @click="navigateTo('/products')">产品管理</el-menu-item>
          <el-menu-item index="/categories" @click="navigateTo('/categories')">分类管理</el-menu-item>
          <el-menu-item index="/inventory" @click="navigateTo('/inventory')">库存管理</el-menu-item>
          <el-menu-item index="/employees" @click="navigateTo('/employees')">员工管理</el-menu-item>
          <el-menu-item index="/roles" @click="navigateTo('/roles')">角色管理</el-menu-item>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header>
          <h1>母婴电商后台管理系统</h1>
        </el-header>
        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeMenu: this.$route.path,
    };
  },
  methods: {
    navigateTo(path) {
      this.$router.push(path);
    },
  },
};
</script>

<style scoped>
.el-header {
  background-color: #f5f5f5;
  padding: 20px;
}
.el-aside {
  background-color: #f5f5f5;
  height: 100vh;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.logo-container {
  width: 100%;
  height: 100px; /* 根据需要调整高度 */
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.logo {
  width: 100%; /* 设置宽度为 100% 以充满容器 */
  height: auto; /* 自动调整高度 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.el-aside {
  background-color: #EEF5FB; /* 设置浅灰色背景色 */
  height: 100vh;
}
.el-header {
  background-color: #EEF5FB;
  padding: 10px 20px; /* 减少上下内边距 */
  display: flex;
  align-items: center; /* 垂直居中对齐 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
</style>
